<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Mi perfil</h3>
    </div>
    <div class="panel-body">
        <form id="frmFillDocente" class="form-horizontal" method="POST" role="form">
            <fieldset>
                <input name="hidIdPersona" type="hidden" value="{IdPersona}" />
                <input name="hidLegajo" type="hidden" value="{Legajo}" />
                <input name="hidDNI" type="hidden" value="{DNI}" />
                <div class="form-group">
                    <label for="txtNombre" class="col-sm-2 control-label">Nombre &ast;</label>
                    <div class="col-sm-4">
                        <input id="txtNombre" class="form-control" name="txtNombre" type="text" maxlength="50" value="{Nombre}" placeholder="Nombre" required="required">
                    </div>
                    <label for="txtApellido" class="col-sm-2 control-label">Apellido &ast;</label>
                    <div class="col-sm-4">
                        <input id="txtApellido" class="form-control" name="txtApellido" type="text" maxlength="50" value="{Apellido}" placeholder="Apellido" required="required">
                    </div>
                </div>
                <div id="pnlUsuario" class="form-group">
                    <label for="txtUsuario" class="col-sm-2 control-label">Usuario &ast;</label>
                    <div class="col-sm-10">
                        <input id="txtUsuario" class="form-control" name="txtUsuario" type="text" value="{Usuario}" maxlength="20" placeholder="Usuario" required="required">
                    </div>
                </div>
                <div id="pnlContrasena" class="form-group">
                    <label for="txtContrasena1" class="col-sm-2 control-label">Contrase&ntilde;a &ast;</label>
                    <div class="col-sm-4">
                        <input id="txtContrasena1" class="form-control" name="txtContrasena1" type="password" value="{Contrasena}" maxlength="20" placeholder="Contrase&ntilde;a" required="required">
                    </div>
                    <label for="txtContrasena1" class="col-sm-2 control-label">Verificacion &ast;</label>
                    <div class="col-sm-4">
                        <input id="txtContrasena2" class="form-control" name="txtContrasena2" type="password" maxlength="20" placeholder="Repita la contrase&ntilde;a" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtTelefono" class="col-sm-2 control-label">Telefono</label>
                    <div class="col-sm-4">
                        <input id="txtTelefono" class="form-control" name="txtTelefono" type="tel" maxlength="20" placeholder="Telefono" value="{Telefono}">
                    </div>
                    <label for="txtCelular" class="col-sm-2 control-label">Celular</label>
                    <div class="col-sm-4">
                        <input id="txtCelular" class="form-control" name="txtCelular" type="tel" maxlength="20" placeholder="Celular" value="{Celular}">
                    </div>
                </div>
                <div id="pnlEmail" class="form-group">
                    <label for="txtEmail" class="col-sm-2 control-label">Email &ast;</label>
                    <div class="col-sm-10">
                        <input id="txtEmail" class="form-control" name="txtEmail" type="email" maxlength="100" value="{Email}" placeholder="Correo electronico" required="required">
                    </div>
                </div>
            </fieldset>
            <button class="btn btn-success" name="btnGuardar" type="submit">Guardar</button>
            <button class="btn btn-default" type="reset">Limpiar</button>
        </form>
    </div>
</div>
<script type="text/javascript">
    function validateUserName(username) {
        $("#pnlUsuario").removeClass("has-success has-feedback");
        $("#pnlUsuario").removeClass("has-error has-feedback");
        $("#icoUsuario").remove();
        
        $.ajax({
            "url": "index.php?do=/user/ajax_check_available_user",
            "type": "POST",
            "async": true,
            "data": {
                usuario: username
            },
            "success": function(result) {
                switch (result) {
                    case "[false]":
                        $("#pnlUsuario").addClass("has-error has-feedback");
                        $("#txtUsuario").parent().append("<span id=\"icoUsuario\" class=\"glyphicon glyphicon-remove form-control-feedback\"></span>");
                        break;
                    case "[true]":
                        $("#pnlUsuario").addClass("has-success has-feedback");
                        $("#txtUsuario").parent().append("<span id=\"icoUsuario\" class=\"glyphicon glyphicon-ok form-control-feedback\"></span>");
                        break;
                    default:
                        console.error("La logica del sistema fallo.", result);
                        break;
                }
            },
            "error": function(result) {
                console.error(result);
            }
        });
    }

    // Restringo lo que pueden ingresar a los fields.
    $("#txtUsuario").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[a-z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtUsuario").change(function() {
        if(this.value.length > 2) {
            validateUserName($(this).val());
        }
    });

    $("#txtNombre").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[a-zA-Z]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtNombre").change(function(event) {
        var username = new String($("#txtNombre").val().substring(0, 1).toLowerCase() + $("#txtApellido").val().split(" ")[0].toLowerCase());
        var maxlen = parseInt($("#txtUsuario").attr('maxLength'));
        var hasValue = $("#txtUsuario").val().length == 0 ? false : true;
        
        if (username.length >= 2 && username.length <= maxlen && !hasValue) {
            $("#txtUsuario").val(username.toString());
            validateUserName(username.toString());
        }
    });

    $("#txtApellido").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[a-zA-Z]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtApellido").change(function(event) {
        var username = new String($("#txtNombre").val().substring(0, 1).toLowerCase() + $("#txtApellido").val().split(" ")[0].toLowerCase());
        var maxlen = parseInt($("#txtUsuario").attr('maxLength'));
        var hasValue = $("#txtUsuario").val().length == 0 ? false : true;
        
        if (username.length >= 2 && username.length <= maxlen && !hasValue) {
            $("#txtUsuario").val(username.toString());
            validateUserName(username.toString());
        }
    });

    $("#txtContrasena1").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtContrasena1").change(function() {
        $("#pnlContrasena").removeClass("has-success has-feedback");
        $("#pnlContrasena").removeClass("has-error has-feedback");

        if ($("#txtContrasena2").val().length > 0) {
            $("#txtContrasena2").val("");
        }
    });

    $("#txtContrasena2").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtContrasena2").change(function() {
        $("#pnlContrasena").removeClass("has-success has-feedback");
        $("#pnlContrasena").removeClass("has-error has-feedback");

        if ($("#txtContrasena1").val() == $("#txtContrasena2").val()) {
            $("#pnlContrasena").addClass("has-success has-feedback");
        } else {
            $("#pnlContrasena").addClass("has-error has-feedback");
        }
    });

    $("#txtTelefono").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtCelular").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });

    $("#txtEmail").focus(function() {
        $("#pnlEmail").removeClass("has-success has-feedback");
        $("#pnlEmail").removeClass("has-error has-feedback");
        $("#icoEmail").remove();
    });
    $("#txtEmail").change(function() {
        $.ajax({
            "url": "index.php?do=/user/ajax_check_available_email",
            "type": "POST",
            "async": true,
            "data": {
                email: $(this).val()
            },
            "success": function(result) {
                switch (result) {
                    case "[false]":
                        $("#pnlEmail").addClass("has-error has-feedback");
                        $("#txtEmail").parent().append("<span id=\"icoEmail\" class=\"glyphicon glyphicon-remove form-control-feedback\"></span>");
                        break;
                    case "[true]":
                        $("#pnlEmail").addClass("has-success has-feedback");
                        $("#txtEmail").parent().append("<span id=\"icoEmail\" class=\"glyphicon glyphicon-ok form-control-feedback\"></span>");
                        break;
                    default:
                        console.error("La logica del sistema fallo.", result);
                        break;
                }
            },
            "error": function(result) {
                console.error(result);
            }
        });
    });
    
    $("#frmFillDocente").submit(function(event) {
        var hasError = false;
        var errorMsg = "";
        
        if($("#txtUsuario").val().length == 0) {
            hasError = true;
            errorMsg += "> Usuario\n";
        }
        if($("#txtNombre").val().length == 0) {
            hasError = true;
            errorMsg += "> Nombre\n";
        }
        if($("#txtApellido").val().length == 0) {
            hasError = true;
            errorMsg += "> Apellido\n";
        }
        if($("#txtContrasena1").val().length == 0 || $("#txtContrasena2").val().length == 0) {
            hasError = true;
            errorMsg += "> Contraseña y su verificacion\n";
        }
        if($("#txtEmail").val().length == 0) {
            hasError = true;
            errorMsg += "> Email\n";
        }
        
        if(hasError) {
            alert("Debe completar los siguentes campos:\n" + errorMsg);
            event.preventDefault();
        }
    });
</script>